<template>
  <div class="consulList-page">
    <GhNavBar title="聊天通道列表"  />
    <div class="list">
        <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        v-if="items.length>0"
      >
        <van-cell v-for="item in items" :key="item.id"  >
            <div class="warn" >
                <p v-if="itemCountdown(item).days >= 1">
                    <gh-icon class="icon" name="consult-daojishi"></gh-icon> 距离咨询开始时间为 {{ itemCountdown(item).days }}天{{ itemCountdown(item).hours }}小时
                  </p>
                  <p v-else-if="itemCountdown(item).hours >= 1">
                    <gh-icon class="icon" name="consult-daojishi"></gh-icon>   距离咨询开始时间为 {{ itemCountdown(item).hours }}小时{{ itemCountdown(item).minutes }}分钟
                  </p>
                  <p v-else-if="itemCountdown(item).minutes > 0">
                    <gh-icon class="icon" name="consult-daojishi"></gh-icon> 距离咨询开始时间为 {{ itemCountdown(item).minutes }}分钟
                  </p>
                  <p v-else>
                    <gh-icon class="icon" name="consult-daojishi"></gh-icon> 正处于咨询时间段
                  </p>
              </div>
            <div class="content_box" >
                <div class="header">
                    <div class="left-head">
                        <gh-icon class="icon" name="consult-zixunshi" />
                        <span>{{item.name}}</span>
                        <span class="arrow">></span>
                    </div>
                    <div class="right-head"></div>
                 </div>
                 <div class="middle">
                    <div class="pic_box">
                        <img :src="item.avatar">
                    </div>
                    <div class="timeInfo">
                        <p class="date">  预约时间：{{item.date}} </p>
                        <p class="timeSlot"> {{item.start_time}}-{{item.end_time}}</p>
                    </div>
                    <div class="toConsult">
                        <van-button class="btn" native-type="submit" block round type="primary" @click="toConsultDep(item)" >
                            开始聊天
                        </van-button>
                    </div>
                 </div>
            </div>
        </van-cell>
        
      </van-list>
      <div class="nothing-info" v-else>
        <van-empty  image-size="100"  image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" description="暂无已预约信息" />
        <div class="toappoint" @click="router.push('/booking')">去预约</div>
    </div>
    </div>

  </div>
</template>

<script setup>
import {ref,reactive,onBeforeMount,computed,onMounted,watch} from "vue"
import {getAppointmentData,getScheduledData,getCancelledData,getCompletedData,getScheduledDataAfter,updateScheduledIntoCompletd } from '@/services/booking'
import {getuseridByaccount}from '@/services/others'
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'
import{useRouter,useRoute}from 'vue-router'
const router =useRouter();  
const route =useRoute()
//定义聊天通道列表响应式变量
const items=ref([])
const user_id=ref()
const loading = ref(false);
const finished = ref(false);
const currentDate = ref(new Date());

const itemCountdown = (item) => {
  // 如果时间是小于 10:00 的情况下，需要补全时间为类似 "08:00" 的格式
  const paddedTime = item.start_time.length < 5 ? `0${item.start_time}` : item.start_time;
  const targetDateTime = new Date(`${item.date}T${paddedTime}`);
  const timeDiff = targetDateTime.getTime() - currentDate.value.getTime();
  
  if (timeDiff <= 0) {
    return { days: 0, hours: 0, minutes: 0 };
  }
  
  const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));

  return { days, hours, minutes };
};

onBeforeMount(async()=>{
  const account=JSON.parse(localStorage.getItem('gh-user')).user.userData.account
   const res=await getuseridByaccount(account).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    })
   user_id.value=res.data.id
   init()
})

const init=async()=>{
    const res=await getScheduledDataAfter(user_id.value).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    });
    items.value=res.data
    // console.log(items.value)
    finished.value=true
}

//进入聊天室
const toConsultDep=async(item)=>{
    // console.log(item)
    const currentTime=new Date()
    const endTime=new Date(`${item.date}T${item.end_time}`)
    const startTime=new Date(`${item.date}T${item.start_time}`)
    // if(currentTime>endTime){
    //     const res=await updateScheduledIntoCompletd(item.appointment_id)
    //     Toast('咨询时间已过，请重新预约')
    //      // 强制刷新当前页面
    //      location.reload(true);
    //      return
    // }
    // if(currentTime<startTime){
    //     Toast('未到咨询时间段，请等待')
    //     return
    // }
router.push(`/consultRoom/${item.appointment_id}`)
}

</script>

<style lang="scss" scoped>
.consulList-page{
    width: 100%;
    .list{
        margin-top: 40px;
        width: 100%;
        .van-cell{
        width: 100%;
        padding: 6px;
        border-top: 10px solid #f5f5f5;
        background-color:#fff;
        .warn{
            width: 100%;
            text-align: center;
            font-size: 12px;
            padding: 10px;
            color: var(--gh-price);
        }
        .content_box{
            width: 100%;
            height: 100%;
            .header{
                display: flex;
                align-items: center;
                width: 100%;
                height: 30px;
                padding: 0 20px;
                justify-content: space-between;
                .left-head{
                    .icon{
                    font-size: 16px;
                    top: 10px;
                    margin-right: 10px;
                }
                span{
                    font-size: 14px;
                    font-weight: bold;
                 }
                 .arrow{
                    font-size: 12px;
                    color: var(--gh-dark);
                    margin-left: 10px;
                 }
               }
               .right-head{
                   color: var(--gh-text3);
               }
            }
            .middle{
                 width: 100%;
                 padding: 10px 2px 10px 15px;
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
                 .pic_box{
                    width: 50px;
                    height: 50px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                    }
                 }
                 .timeInfo{
                    font-size: 12px;
                    .date{
                        font-weight: bold;
                    }
                    .timeSlot{
                        font-size: 14px;
                    }
                 }
                 .toConsult{
                    
                    .btn{
                        font-size: 13px;
                        height: 30px;
                        width: 100px;
                    }
                 }
            }
        }
        }
    .nothing-info{
        width: 100%;
        text-align: center;
        .toappoint{
            margin-top: 10px;
            font-size: 18px;
            color: var(--gh-primary);
        }
    }

    }
}
</style>
